<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 主控制台</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow: hidden;
        }

        .app-container {
            display: flex;
            height: 100vh;
        }

        /* 左侧导航栏 */
        .sidebar {
            width: 280px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            box-shadow: 2px 0 20px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 100;
        }

        .logo {
            padding: 30px 20px;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .logo h1 {
            font-size: 1.8rem;
            margin-bottom: 8px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .logo p {
            font-size: 12px;
            opacity: 0.9;
        }

        .nav-tabs {
            flex: 1;
            padding: 20px 0;
            overflow-y: auto;
        }

        .nav-tab {
            display: flex;
            align-items: center;
            padding: 18px 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
            margin: 2px 0;
            color: #4a5568;
            font-weight: 500;
        }

        .nav-tab:hover {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border-left-color: rgba(102, 126, 234, 0.3);
        }

        .nav-tab.active {
            background: rgba(102, 126, 234, 0.15);
            color: #667eea;
            border-left-color: #667eea;
            font-weight: 600;
        }

        .nav-icon {
            font-size: 1.5rem;
            margin-right: 15px;
            width: 24px;
            text-align: center;
        }

        .nav-text {
            flex: 1;
        }

        .nav-badge {
            background: #667eea;
            color: white;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 10px;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            background: white;
            overflow: hidden;
            position: relative;
        }

        .tab-content {
            height: 100%;
            overflow-y: auto;
            padding: 30px;
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 通用样式 */
        .page-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e2e8f0;
        }

        .page-title {
            font-size: 2.2rem;
            color: #2d3748;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .page-subtitle {
            color: #666;
            font-size: 16px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }

        .content-table {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .table-header {
            background: #f8f9fa;
            padding: 20px 30px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-success {
            background: #48bb78;
            color: white;
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .search-bar {
            padding: 0 30px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #e2e8f0;
        }

        .search-input {
            width: 100%;
            max-width: 400px;
            padding: 12px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 25px;
            outline: none;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .search-input:focus {
            border-color: #667eea;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .sidebar {
                width: 240px;
            }
            
            .tab-content {
                padding: 20px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* 标签页导航样式 */
        .tab-nav {
            display: flex;
            background: rgba(255,255,255,0.95);
            border-bottom: 1px solid #e2e8f0;
            padding: 0 20px;
            gap: 5px;
        }

        .tab-btn {
            padding: 15px 25px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .tab-btn.active {
            color: #667eea;
            border-bottom-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }
        
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.9) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* 系统容器样式 */
        .system-container {
            padding: 30px;
            height: 100%;
        }
        
        .system-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #2d3748;
            font-size: 2.2rem;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="logo">
                <h1>📚 岚小字</h1>
                <p>AI识字教学系统</p>
            </div>
            
            <div class="nav-tabs">
                <div class="nav-tab" onclick="openSystem('course')">
                    <div class="nav-icon">📋</div>
                    <div class="nav-text">课程管理</div>
                    <div class="nav-badge">5</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('zigen')">
                    <div class="nav-icon">📊</div>
                    <div class="nav-text">字根管理</div>
                    <div class="nav-badge">12</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('bushou')">
                    <div class="nav-icon">🏗️</div>
                    <div class="nav-text">部首笔画</div>
                    <div class="nav-badge">7</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('compound')">
                    <div class="nav-icon">🔗</div>
                    <div class="nav-text">复合字管理</div>
                    <div class="nav-badge">3.2K</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('shuxie')">
                    <div class="nav-icon">✍️</div>
                    <div class="nav-text">书写讲解</div>
                    <div class="nav-badge">24</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('tuozhuai')">
                    <div class="nav-icon">🧩</div>
                    <div class="nav-text">拖拽组合</div>
                    <div class="nav-badge">15</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('youxi')">
                    <div class="nav-icon">🎮</div>
                    <div class="nav-text">游戏巩固</div>
                    <div class="nav-badge">6</div>
                </div>
                
                <div class="nav-tab" onclick="openSystem('ai')">
                    <div class="nav-icon">🤖</div>
                    <div class="nav-text">AI配置</div>
                    <div class="nav-badge">AI</div>
                </div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 标签页导航 -->
            <div class="tab-nav">
                <button class="tab-btn active" onclick="switchTab('course')">📚 课程管理</button>
                <button class="tab-btn" onclick="switchTab('zigen')">🧩 字根管理</button>
                <button class="tab-btn" onclick="switchTab('bushou')">📝 部首笔画</button>
                <button class="tab-btn" onclick="switchTab('compound')">🔗 复合字管理</button>
                <button class="tab-btn" onclick="switchTab('shuxie')">✍️ 书写讲解</button>
                <button class="tab-btn" onclick="switchTab('tuozhuai')">🎯 拖拽组合</button>
                <button class="tab-btn" onclick="switchTab('youxi')">🎮 游戏巩固</button>
                <button class="tab-btn" onclick="switchTab('ai')">🤖 AI配置</button>
            </div>

            <!-- 课程管理 -->
            <div class="tab-content" id="course-content">
                <div class="system-container">
                    <h2>📚 课程管理系统</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        AI赋能的字根识字教学管理平台 - 课程进度、AI生成、模块管理
                    </p>
                    
                    <!-- 课程管理内容将在这里动态加载 -->
                    <div id="course-main-content">
                        <div style="text-align: center; padding: 100px 0; color: #999;">
                            📖 课程管理系统正在加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 字根管理 -->
            <div class="tab-content" id="zigen-content">
                <div class="system-container">
                    <h2>🧩 字根管理系统</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        字根基础数据库管理 - 字根录入、AI智能填充、数据导入导出
                    </p>
                    
                    <!-- 字根管理内容将在这里动态加载 -->
                    <div id="zigen-main-content">
                        <div style="text-align: center; padding: 100px 0; color: #999;">
                            📊 字根管理系统正在加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 部首笔画 -->
            <div class="tab-content" id="bushou-content">
                <div class="page-header">
                    <h2 class="page-title">🏗️ 部首笔画管理</h2>
                    <p class="page-subtitle">复合字组成规律管理</p>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number">7</div>
                        <div class="stat-label">总部首数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">45</div>
                        <div class="stat-label">复合字数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">6</div>
                        <div class="stat-label">平均组字数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">7</div>
                        <div class="stat-label">已完善</div>
                    </div>
                </div>
                
                <div class="content-table">
                    <div class="table-header">
                        <h3 class="table-title">部首笔画数据表</h3>
                        <div class="action-buttons">
                            <button class="btn btn-success" onclick="addBushou()">➕ 新增部首</button>
                            <button class="btn btn-primary" onclick="importBushou()">📥 导入数据</button>
                            <button class="btn btn-secondary" onclick="exportBushou()">📤 导出数据</button>
                        </div>
                    </div>
                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="搜索部首、读音..." id="bushouSearch">
                    </div>
                    
                    <!-- 实际的部首数据表格 -->
                    <table style="width: 100%; border-collapse: separate; border-spacing: 0;">
                        <thead>
                            <tr style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 60px;">编号</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 100px;">名称</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 80px;">部首</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 80px;">读音</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 60px;">笔画</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 200px;">复合字(5-10个)</th>
                                <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 100px;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="bushouTableBody">
                            <!-- 部首数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 编辑器弹窗 -->
                <div id="bushouEditor" class="modal-overlay" style="display: none;" onclick="closeBushouEditor(event)">
                    <div class="editor-modal" style="background: white; border-radius: 20px; width: 90%; max-width: 1000px; max-height: 90vh; overflow: hidden; box-shadow: 0 25px 100px rgba(0,0,0,0.3); animation: modalSlideIn 0.3s ease;">
                        <div class="modal-header" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center;">
                            <div class="modal-title" style="font-size: 20px; font-weight: 600;" id="modalTitle">编辑部首</div>
                            <button class="close-btn" onclick="closeBushouEditor()" style="background: rgba(255,255,255,0.2); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 18px; transition: background 0.3s;">×</button>
                        </div>

                        <div class="modal-content" style="padding: 30px; height: 600px; overflow-y: auto;">
                            <!-- 部首预览 -->
                            <div class="bushou-preview" style="display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 12px; margin-bottom: 20px;">
                                <div class="char" style="font-size: 4rem; font-weight: bold; text-shadow: 0 2px 8px rgba(0,0,0,0.3);" id="previewChar">？</div>
                                <div class="info" style="text-align: center;">
                                    <div id="previewNumber">编号：自动生成</div>
                                    <div id="previewPinyin">读音：待填充</div>
                                    <div id="previewStrokes">笔画：-画</div>
                                </div>
                            </div>

                            <!-- 编辑表单 -->
                            <div class="editor-sections" style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
                                <!-- 左侧字段 -->
                                <div class="left-section">
                                    <h3 class="section-title" style="font-size: 16px; font-weight: 600; color: #2d3748; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0;">📝 基础信息</h3>
                                    
                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">编号</label>
                                        <input type="text" class="form-input" id="editNumber" placeholder="如：001（自动生成）" style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit;">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">名称 *</label>
                                        <input type="text" class="form-input" id="editName" placeholder="如：土字旁" style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit;">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">部首 *</label>
                                        <input type="text" class="form-input" id="editRadical" placeholder="如：土" maxlength="1" style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit;">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">读音</label>
                                        <input type="text" class="form-input" id="editPinyin" placeholder="如：tǔ" style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit;">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">笔画数</label>
                                        <input type="number" class="form-input" id="editStrokes" placeholder="如：3" style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit;">
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">含义</label>
                                        <textarea class="form-textarea" id="editMeaning" placeholder="部首的基本含义和作用..." style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit; height: 100px; resize: vertical;"></textarea>
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">复合字（5-10个）</label>
                                        <div class="compound-chars-editor" id="compoundCharsEditor" style="display: flex; flex-wrap: wrap; gap: 8px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; min-height: 100px;">
                                            <!-- 复合字输入框将通过JavaScript动态生成 -->
                                        </div>
                                        <small style="color: #666;">点击+号添加汉字，每个部首可组成5-10个复合字</small>
                                    </div>
                                </div>

                                <!-- 右侧字段 -->
                                <div class="right-section">
                                    <h3 class="section-title" style="font-size: 16px; font-weight: 600; color: #2d3748; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0;">🖼️ 象形起源</h3>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">象形图片</label>
                                        <div class="image-section" style="display: flex; flex-direction: column; gap: 10px;">
                                            <div class="image-upload" onclick="triggerImageUpload()" style="display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border: 2px dashed #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 0.3s;">
                                                <input type="file" id="imageInput" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
                                                <div>
                                                    <p>📷 点击上传象形图片</p>
                                                    <small>支持 JPG、PNG 格式</small>
                                                </div>
                                            </div>
                                            <button class="action-btn btn-primary" onclick="searchOriginData()" style="margin-top: 10px; padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; background: #f5576c; color: white;">
                                                🔍 搜索象形数据库
                                            </button>
                                        </div>
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">起源说明</label>
                                        <textarea class="form-textarea" id="editOrigin" placeholder="部首的象形起源和演变历程..." style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit; height: 100px; resize: vertical;"></textarea>
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">组字规律</label>
                                        <textarea class="form-textarea" id="editRules" placeholder="此部首与字根组成汉字的规律和特点..." style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit; height: 100px; resize: vertical;"></textarea>
                                    </div>

                                    <div class="form-group" style="margin-bottom: 15px;">
                                        <label class="form-label" style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">教学要点</label>
                                        <textarea class="form-textarea" id="editTeaching" placeholder="教学时需要重点强调的内容..." style="width: 100%; padding: 10px 12px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 14px; transition: border-color 0.3s; font-family: inherit; height: 100px; resize: vertical;"></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- 保存按钮 -->
                            <button class="save-btn" onclick="saveBushou()" style="width: 100%; padding: 12px; background: #48bb78; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s; margin-top: 20px;">
                                💾 保存修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 书写讲解管理 -->
            <div id="shuxie-content" class="tab-content">
                <div class="system-container">
                    <h2>✍️ 书写讲解管理系统</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        字根部首书写练习管理 - 笔画顺序、书写要领、记忆口诀
                    </p>
                    
                    <!-- 书写讲解内容将在这里动态加载 -->
                    <div id="shuxie-main-content">
                        <div style="text-align: center; padding: 100px 0; color: #999;">
                            📝 书写讲解系统正在加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 拖拽组合练习 -->
            <div id="tuozhuai-content" class="tab-content">
                <div class="system-container">
                    <h2>🎯 拖拽组合练习系统</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        交互式字根组合游戏 - 拖拽体验、复合字学习
                    </p>
                    
                    <!-- 拖拽组合内容将在这里动态加载 -->
                    <div id="tuozhuai-main-content">
                        <div style="text-align: center; padding: 100px 0; color: #999;">
                            🎮 拖拽组合系统正在加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- 游戏巩固中心 -->
            <div id="youxi-content" class="tab-content">
                <div class="system-container">
                    <h2>🎮 游戏巩固中心</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        6种趣味游戏巩固学习效果 - 记忆翻牌、连连看、快速识字
                    </p>
                    
                    <!-- 游戏巩固内容将在这里动态加载 -->
                    <div id="youxi-main-content">
                        <div style="text-align: center; padding: 100px 0; color: #999;">
                            🎯 游戏巩固系统正在加载中...
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI配置管理 -->
            <div id="ai-content" class="tab-content">
                <div class="system-container">
                    <h2>🤖 AI智能配置中心</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        AI模型配置管理 - 接口配置、提示词模板、使用统计
                    </p>
                    
                    <!-- AI配置内容 -->
                    <div id="ai-main-content">
                        <!-- AI配置卡片 -->
                        <div class="ai-config-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
                            <!-- 基础配置卡片 -->
                            <div class="config-card" style="background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
                                <h3 style="color: #667eea; margin-bottom: 20px; font-size: 18px;">🔧 基础配置</h3>
                                
                                <div class="form-group" style="margin-bottom: 15px;">
                                    <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">AI平台</label>
                                    <select id="aiPlatform" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                        <option value="siliconflow">SiliconFlow</option>
                                        <option value="openai">OpenAI</option>
                                        <option value="anthropic">Anthropic</option>
                                        <option value="local">本地模型</option>
                                    </select>
                                </div>

                                <div class="form-group" style="margin-bottom: 15px;">
                                    <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">API密钥</label>
                                    <input type="password" id="apiKey" placeholder="请输入API密钥" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                </div>

                                <div class="form-group" style="margin-bottom: 15px;">
                                    <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">基础URL</label>
                                    <input type="text" id="baseUrl" placeholder="https://api.siliconflow.cn/v1" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                </div>

                                <div class="form-group" style="margin-bottom: 15px;">
                                    <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">默认模型</label>
                                    <select id="defaultModel" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                        <option value="Qwen2.5-7B-Instruct">Qwen2.5-7B-Instruct</option>
                                        <option value="DeepSeek-V3">DeepSeek-V3</option>
                                        <option value="DeepSeek-R1">DeepSeek-R1</option>
                                        <option value="gpt-4">GPT-4</option>
                                        <option value="claude-3-sonnet">Claude-3-Sonnet</option>
                                    </select>
                                </div>

                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                                    <div class="form-group">
                                        <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">温度参数</label>
                                        <input type="number" id="temperature" min="0" max="2" step="0.1" value="0.7" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                    </div>
                                    <div class="form-group">
                                        <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748;">最大Token</label>
                                        <input type="number" id="maxTokens" min="100" max="4000" value="1000" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="updateAiConfig()">
                                    </div>
                                </div>
                            </div>

                            <!-- 使用统计卡片 -->
                            <div class="stats-card" style="background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border-left: 4px solid #48bb78;">
                                <h3 style="color: #48bb78; margin-bottom: 20px; font-size: 18px;">📊 使用统计</h3>
                                
                                <div class="ai-stats-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                                    <div class="stat-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                                        <div style="font-size: 24px; font-weight: bold; color: #667eea;" id="totalCalls">156</div>
                                        <div style="font-size: 12px; color: #666;">总调用次数</div>
                                    </div>
                                    <div class="stat-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                                        <div style="font-size: 24px; font-weight: bold; color: #48bb78;" id="successRate">94.2%</div>
                                        <div style="font-size: 12px; color: #666;">成功率</div>
                                    </div>
                                    <div class="stat-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                                        <div style="font-size: 24px; font-weight: bold; color: #f5576c;" id="avgResponseTime">2.3s</div>
                                        <div style="font-size: 12px; color: #666;">平均响应时间</div>
                                    </div>
                                    <div class="stat-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                                        <div style="font-size: 24px; font-weight: bold; color: #f093fb;" id="tokenConsumption">45.2K</div>
                                        <div style="font-size: 12px; color: #666;">Token消耗</div>
                                    </div>
                                </div>

                                <div style="margin-top: 20px;">
                                    <button style="width: 100%; padding: 10px; background: #48bb78; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="testAiConnection()">
                                        🔍 测试连接
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 提示词模板管理 -->
                        <div class="prompt-templates" style="background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); margin-bottom: 30px;">
                            <h3 style="color: #f5576c; margin-bottom: 20px; font-size: 18px;">📝 提示词模板管理</h3>
                            
                            <div class="template-tabs" style="display: flex; gap: 10px; margin-bottom: 20px;">
                                <button class="template-tab active" onclick="switchPromptTab('welcome')" style="padding: 10px 20px; border: none; background: #f5576c; color: white; border-radius: 8px; cursor: pointer;">欢迎词模板</button>
                                <button class="template-tab" onclick="switchPromptTab('learning')" style="padding: 10px 20px; border: 1px solid #f5576c; background: white; color: #f5576c; border-radius: 8px; cursor: pointer;">学习内容模板</button>
                                <button class="template-tab" onclick="switchPromptTab('exercise')" style="padding: 10px 20px; border: 1px solid #f5576c; background: white; color: #f5576c; border-radius: 8px; cursor: pointer;">练习生成模板</button>
                            </div>

                            <div class="template-content">
                                <div id="welcome-template" class="template-item" style="display: block;">
                                    <label style="display: block; margin-bottom: 10px; font-weight: 600; color: #2d3748;">欢迎词生成模板</label>
                                    <textarea id="welcomePrompt" style="width: 100%; height: 120px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-family: inherit; resize: vertical;" placeholder="输入欢迎词生成的提示词模板...">你是一位经验丰富的小学语文老师，正在为学习字根'{radical}'的课程创建欢迎词。请创建一个温馨、有趣的欢迎内容，包括：1.亲切的问候 2.本课学习目标 3.学习动机激发 4.课程预览。语言要适合儿童，生动有趣。</textarea>
                                </div>
                                
                                <div id="learning-template" class="template-item" style="display: none;">
                                    <label style="display: block; margin-bottom: 10px; font-weight: 600; color: #2d3748;">学习内容生成模板</label>
                                    <textarea id="learningPrompt" style="width: 100%; height: 120px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-family: inherit; resize: vertical;" placeholder="输入学习内容生成的提示词模板...">作为汉字教学专家，请为字根'{radical}'创建详细的学习内容，包括：1.字根介绍 2.字形特征讲解 3.记忆技巧 4.字源故事(要有趣) 5.实例展示。内容要准确、生动、适合初学者。</textarea>
                                </div>
                                
                                <div id="exercise-template" class="template-item" style="display: none;">
                                    <label style="display: block; margin-bottom: 10px; font-weight: 600; color: #2d3748;">练习题生成模板</label>
                                    <textarea id="exercisePrompt" style="width: 100%; height: 120px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-family: inherit; resize: vertical;" placeholder="输入练习题生成的提示词模板...">请为字根'{radical}'生成5道适合儿童的练习题，包括：1.字根识别题 2.组字练习 3.看图识字 4.选择题 5.填空题。题目要有趣味性，难度适中。</textarea>
                                </div>
                            </div>

                            <div style="display: flex; gap: 10px; margin-top: 20px;">
                                <button style="flex: 1; padding: 10px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="savePromptTemplates()">
                                    💾 保存模板
                                </button>
                                <button style="flex: 1; padding: 10px; background: #f093fb; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="testPromptTemplate()">
                                    🧪 测试模板
                                </button>
                                <button style="flex: 1; padding: 10px; background: #fad0c4; color: #333; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="resetPromptTemplates()">
                                    🔄 重置默认
                                </button>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="ai-actions" style="display: flex; gap: 15px; justify-content: center;">
                            <button style="padding: 12px 30px; background: #667eea; color: white; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 16px;" onclick="saveAiConfig()">
                                💾 保存AI配置
                            </button>
                            <button style="padding: 12px 30px; background: #48bb78; color: white; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 16px;" onclick="exportAiConfig()">
                                📤 导出配置
                            </button>
                            <button style="padding: 12px 30px; background: #f5576c; color: white; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 16px;" onclick="importAiConfig()">
                                📥 导入配置
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 复合字管理系统 -->
            <div id="compound-content" class="tab-content">
                <div class="system-container">
                    <h2>🔗 复合字智能管理中心</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 30px;">
                        字根+部首+笔画组合管理 - AI推荐、组合验证、批量优化
                    </p>
                    
                    <!-- 统计面板 -->
                    <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
                        <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 15px; text-align: center; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);">
                            <div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 8px;" id="totalCompounds">3,247</div>
                            <div style="font-size: 14px; opacity: 0.9;">复合字总数</div>
                        </div>
                        <div class="stat-card" style="background: linear-gradient(135deg, #48bb78 0%, #2d7a3e 100%); color: white; padding: 25px; border-radius: 15px; text-align: center; box-shadow: 0 8px 32px rgba(72, 187, 120, 0.3);">
                            <div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 8px;" id="verifiedCompounds">2,891</div>
                            <div style="font-size: 14px; opacity: 0.9;">已验证</div>
                        </div>
                        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 25px; border-radius: 15px; text-align: center; box-shadow: 0 8px 32px rgba(240, 147, 251, 0.3);">
                            <div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 8px;" id="aiRecommended">356</div>
                            <div style="font-size: 14px; opacity: 0.9;">AI推荐待审</div>
                        </div>
                        <div class="stat-card" style="background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%); color: #333; padding: 25px; border-radius: 15px; text-align: center; box-shadow: 0 8px 32px rgba(250, 208, 196, 0.3);">
                            <div style="font-size: 2.5rem; font-weight: bold; margin-bottom: 8px;" id="avgComponents">2.4</div>
                            <div style="font-size: 14px; opacity: 0.8;">平均组件数</div>
                        </div>
                    </div>

                    <!-- 操作面板 -->
                    <div class="operation-panel" style="background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); margin-bottom: 30px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                            <h3 style="color: #2d3748; margin: 0;">🛠️ 智能操作面板</h3>
                            <div style="display: flex; gap: 10px;">
                                <button style="padding: 8px 16px; background: #667eea; color: white; border: none; border-radius: 20px; cursor: pointer; font-size: 12px;" onclick="refreshAiRecommendations()">🔄 刷新AI推荐</button>
                                <button style="padding: 8px 16px; background: #48bb78; color: white; border: none; border-radius: 20px; cursor: pointer; font-size: 12px;" onclick="batchVerify()">✅ 批量验证</button>
                            </div>
                        </div>
                        
                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;">
                            <button style="padding: 12px; background: #f093fb; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="aiGenerateCompounds()">
                                🤖 AI生成复合字
                            </button>
                            <button style="padding: 12px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="validateCombinations()">
                                🔍 验证组合合理性
                            </button>
                            <button style="padding: 12px; background: #48bb78; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="optimizeDatabase()">
                                ⚡ 优化数据库
                            </button>
                        </div>
                    </div>

                    <!-- 筛选和搜索 -->
                    <div class="filter-panel" style="background: white; border-radius: 15px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); margin-bottom: 30px;">
                        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 15px; align-items: end;">
                            <div>
                                <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">搜索复合字</label>
                                <input type="text" id="compoundSearch" placeholder="输入汉字、拼音或含义..." style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="filterCompounds()">
                            </div>
                            <div>
                                <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">字根筛选</label>
                                <select id="radicalFilter" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="filterCompounds()">
                                    <option value="">全部字根</option>
                                    <option value="一">一</option>
                                    <option value="工">工</option>
                                    <option value="口">口</option>
                                    <option value="土">土</option>
                                    <option value="水">水</option>
                                </select>
                            </div>
                            <div>
                                <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">验证状态</label>
                                <select id="statusFilter" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="filterCompounds()">
                                    <option value="">全部状态</option>
                                    <option value="verified">已验证</option>
                                    <option value="pending">待审核</option>
                                    <option value="rejected">已拒绝</option>
                                </select>
                            </div>
                            <div>
                                <label style="display: block; margin-bottom: 5px; font-weight: 600; color: #2d3748; font-size: 13px;">笔画数</label>
                                <select id="strokeFilter" style="width: 100%; padding: 10px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none;" onchange="filterCompounds()">
                                    <option value="">全部笔画</option>
                                    <option value="1-5">1-5画</option>
                                    <option value="6-10">6-10画</option>
                                    <option value="11-15">11-15画</option>
                                    <option value="16+">16画以上</option>
                                </select>
                            </div>
                            <div>
                                <button style="width: 100%; padding: 10px; background: #f5576c; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;" onclick="clearFilters()">
                                    🔄 清空筛选
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 复合字数据表格 -->
                    <div class="content-table" style="background: white; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden;">
                        <div class="table-header" style="background: #f8f9fa; padding: 20px 30px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
                            <h3 style="font-size: 18px; font-weight: 600; color: #2d3748; margin: 0;">🔗 复合字数据表</h3>
                            <div style="display: flex; gap: 10px;">
                                <button style="padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; background: #48bb78; color: white;" onclick="addCompound()">➕ 新增复合字</button>
                                <button style="padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; background: #667eea; color: white;" onclick="importCompounds()">📥 导入数据</button>
                                <button style="padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; background: #e2e8f0; color: #4a5568;" onclick="exportCompounds()">📤 导出数据</button>
                            </div>
                        </div>
                        
                        <!-- 表格内容 -->
                        <div style="overflow-x: auto;">
                            <table style="width: 100%; border-collapse: separate; border-spacing: 0;">
                                <thead>
                                    <tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 80px;">复合字</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 100px;">拼音</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 80px;">笔画数</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 200px;">组成部件</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 150px;">含义</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 100px;">验证状态</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 100px;">难度等级</th>
                                        <th style="padding: 18px 12px; text-align: center; font-weight: 600; font-size: 14px; width: 120px;">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="compoundTableBody">
                                    <!-- 复合字数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局状态管理
        let currentTab = 'course'; // 默认显示课程管理
        let isLoading = false;

        // 标签页切换函数
        function switchTab(tabName) {
            if (isLoading) return;
            
            // 更新标签按钮状态
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 找到对应的标签按钮并激活
            const targetBtn = Array.from(document.querySelectorAll('.tab-btn')).find(btn => {
                const text = btn.textContent;
                return (tabName === 'course' && text.includes('课程')) ||
                       (tabName === 'zigen' && text.includes('字根')) ||
                       (tabName === 'bushou' && text.includes('部首')) ||
                       (tabName === 'compound' && text.includes('复合字')) ||
                       (tabName === 'shuxie' && text.includes('书写')) ||
                       (tabName === 'tuozhuai' && text.includes('拖拽')) ||
                       (tabName === 'youxi' && text.includes('游戏')) ||
                       (tabName === 'ai' && text.includes('AI'));
            });
            if (targetBtn) {
                targetBtn.classList.add('active');
            }
            
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.style.display = 'none';
            });
            
            // 显示选中的标签页
            const targetContent = document.getElementById(tabName + '-content');
            if (targetContent) {
                targetContent.style.display = 'block';
            }
            
            // 更新当前标签
            currentTab = tabName;
            
            // 特殊处理AI配置标签页
            if (tabName === 'ai') {
                // 延迟初始化AI配置UI，确保DOM元素已渲染
                setTimeout(() => {
                    loadAiConfigToUI();
                }, 100);
            } else if (tabName === 'compound') {
                // 初始化复合字管理
                setTimeout(() => {
                    initCompoundManagement();
                }, 100);
            } else {
                // 动态加载对应系统内容
                loadSystemContent(tabName);
            }
        }

        // 动态加载系统内容
        function loadSystemContent(systemName) {
            const contentContainer = document.getElementById(systemName + '-main-content');
            if (!contentContainer) return;
            
            // AI配置系统的内容已经直接在HTML中，不需要加载
            if (systemName === 'ai') {
                initAiConfig();
                return;
            }
            
            // 显示加载状态
            contentContainer.innerHTML = `
                <div style="text-align: center; padding: 50px 0;">
                    <div style="font-size: 24px; margin-bottom: 15px;">⏳</div>
                    <div style="color: #666;">正在加载${getSystemName(systemName)}...</div>
                </div>
            `;
            
            // 模拟加载延迟
            setTimeout(() => {
                loadSystemHTML(systemName, contentContainer);
            }, 500);
        }

        // 获取系统名称
        function getSystemName(systemName) {
            const names = {
                'course': '课程管理系统',
                'zigen': '字根管理系统', 
                'bushou': '部首笔画系统',
                'compound': '复合字管理系统',
                'shuxie': '书写讲解系统',
                'tuozhuai': '拖拽组合系统',
                'youxi': '游戏巩固系统',
                'ai': 'AI配置系统'
            };
            return names[systemName] || '系统';
        }

        // 加载对应的HTML内容
        function loadSystemHTML(systemName, container) {
            switch(systemName) {
                case 'course':
                    loadCourseManagement(container);
                    break;
                case 'zigen':
                    loadZigenManagement(container);
                    break;
                case 'bushou':
                    // 部首笔画内容已经在index.html中了，无需重新加载
                    break;
                case 'shuxie':
                    loadShuxieManagement(container);
                    break;
                case 'tuozhuai':
                    loadTuozhuaiManagement(container);
                    break;
                case 'youxi':
                    loadYouxiManagement(container);
                    break;
                case 'ai':
                    // AI配置内容已经在index.html中了，初始化AI配置
                    initAiConfig();
                    break;
                default:
                    container.innerHTML = '<div style="text-align: center; padding: 50px; color: #999;">系统开发中...</div>';
            }
        }

        // 课程管理系统加载
        function loadCourseManagement(container) {
            container.innerHTML = `
                <iframe src="course-management.html" style="width: 100%; height: 800px; border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"></iframe>
            `;
        }

        // 字根管理系统加载
        function loadZigenManagement(container) {
            container.innerHTML = `
                <iframe src="radical-static.html" style="width: 100%; height: 800px; border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"></iframe>
            `;
        }

        // 书写讲解系统加载
        function loadShuxieManagement(container) {
            container.innerHTML = `
                <iframe src="shuxie-jiangjie.html" style="width: 100%; height: 800px; border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"></iframe>
            `;
        }

        // 拖拽组合系统加载
        function loadTuozhuaiManagement(container) {
            container.innerHTML = `
                <iframe src="tuozhuai-zuhe.html" style="width: 100%; height: 800px; border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"></iframe>
            `;
        }

        // 游戏巩固系统加载
        function loadYouxiManagement(container) {
            container.innerHTML = `
                <iframe src="youxi-gonggu.html" style="width: 100%; height: 800px; border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);"></iframe>
            `;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎉 岚小字识字系统主界面开始初始化...');
            
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.style.display = 'none';
            });

            // 初始设置：默认显示课程管理
            switchTab('course');
            
            // 添加标签页切换事件监听
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const tabName = this.textContent.includes('课程') ? 'course' :
                                    this.textContent.includes('字根') ? 'zigen' :
                                    this.textContent.includes('部首') ? 'bushou' :
                                    this.textContent.includes('复合字') ? 'compound' :
                                    this.textContent.includes('书写') ? 'shuxie' :
                                    this.textContent.includes('拖拽') ? 'tuozhuai' :
                                    this.textContent.includes('游戏') ? 'youxi' :
                                    this.textContent.includes('AI') ? 'ai' : 'course';
                    switchTab(tabName);
                });
            });
            
            // 部首搜索功能
            const bushouSearchInput = document.getElementById('bushouSearch');
            if (bushouSearchInput) {
                bushouSearchInput.addEventListener('input', loadBushouTable);
            }
            
            // 编辑表单实时预览
            ['editRadical', 'editNumber', 'editPinyin', 'editStrokes'].forEach(id => {
                const element = document.getElementById(id);
                if (element) {
                    element.addEventListener('input', updatePreview);
                }
            });
            
            // 初始加载部首表格
            setTimeout(() => {
                if (document.getElementById('bushouTableBody')) {
                    loadBushouTable();
                }
            }, 100);
            
            // 初始化AI配置
            initAiConfig();
            
            console.log('🎉 岚小字识字系统主界面加载完成！');
            console.log('📚 包含8大管理系统：课程管理、字根管理、部首笔画、复合字管理、书写讲解、拖拽组合、游戏巩固、AI配置');
        });

        // 工具函数：显示提示信息
        function showMessage(message, type = 'info') {
            const messageDiv = document.createElement('div');
            messageDiv.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                background: ${type === 'success' ? '#48bb78' : type === 'error' ? '#f56565' : '#4299e1'};
                color: white;
                border-radius: 8px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                z-index: 9999;
                font-size: 14px;
                max-width: 300px;
            `;
            messageDiv.textContent = message;
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                messageDiv.remove();
            }, 3000);
        }

        // 工具函数：检查iframe加载状态
        function checkIframeLoad() {
            document.querySelectorAll('iframe').forEach(iframe => {
                iframe.onload = function() {
                    console.log(`✅ ${iframe.src} 加载完成`);
                };
                iframe.onerror = function() {
                    console.error(`❌ ${iframe.src} 加载失败`);
                    showMessage(`系统加载失败：${iframe.src}`, 'error');
                };
            });
        }

        // 系统功能快捷入口
        function openSystem(systemName) {
            const tabButtons = {
                'course': '📚 课程管理',
                'zigen': '🧩 字根管理', 
                'bushou': '📝 部首笔画',
                'compound': '🔗 复合字管理',
                'shuxie': '✍️ 书写讲解',
                'tuozhuai': '🎯 拖拽组合',
                'youxi': '🎮 游戏巩固',
                'ai': '🤖 AI配置'
            };
            
            const targetButton = Array.from(document.querySelectorAll('.tab-btn'))
                .find(btn => btn.textContent.includes(tabButtons[systemName]?.split(' ')[1]));
            
            if (targetButton) {
                targetButton.click();
                showMessage(`已切换到${getSystemName(systemName)}`);
            }
        }

        // 全局暴露函数供外部调用
        window.switchTab = switchTab;
        window.openSystem = openSystem;
        window.showMessage = showMessage;

        // 部首数据管理
        let bushouData = [
            {
                id: 1,
                number: '001',
                name: '土字旁',
                radical: '土',
                pinyin: 'tǔ',
                strokes: 3,
                compoundChars: ['地', '土', '坐', '场', '城', '堂', '塔']
            },
            {
                id: 2,
                number: '002',
                name: '水字旁',
                radical: '水',
                pinyin: 'shuǐ',
                strokes: 4,
                compoundChars: ['河', '海', '湖', '池', '洗', '清', '流']
            },
            {
                id: 3,
                number: '003',
                name: '火字旁',
                radical: '火',
                pinyin: 'huǒ',
                strokes: 4,
                compoundChars: ['烧', '热', '灯', '炎', '烟', '炒']
            },
            {
                id: 4,
                number: '004',
                name: '木字旁',
                radical: '木',
                pinyin: 'mù',
                strokes: 4,
                compoundChars: ['树', '林', '森', '板', '桌', '椅', '桥']
            },
            {
                id: 5,
                number: '005',
                name: '金字旁',
                radical: '金',
                pinyin: 'jīn',
                strokes: 8,
                compoundChars: ['银', '铜', '铁', '钱', '钟']
            },
            {
                id: 6,
                number: '006',
                name: '口字旁',
                radical: '口',
                pinyin: 'kǒu',
                strokes: 3,
                compoundChars: ['吃', '说', '唱', '叫', '听', '味', '呼']
            },
            {
                id: 7,
                number: '007',
                name: '心字旁',
                radical: '心',
                pinyin: 'xīn',
                strokes: 4,
                compoundChars: ['想', '思', '忘', '怕', '爱', '快', '慢']
            }
        ];

        let currentEditingBushou = null;
        let isNewBushou = false;

        // 部首管理函数
        function loadBushouTable() {
            const tbody = document.getElementById('bushouTableBody');
            if (!tbody) return;

            const searchKeyword = document.getElementById('bushouSearch')?.value.toLowerCase() || '';
            const filteredData = bushouData.filter(bushou => 
                bushou.name.includes(searchKeyword) ||
                bushou.radical.includes(searchKeyword) ||
                bushou.pinyin.toLowerCase().includes(searchKeyword) ||
                bushou.number.includes(searchKeyword)
            );

            tbody.innerHTML = filteredData.map(bushou => `
                <tr style="border-bottom: 1px solid #f0f0f0;" onmouseover="this.style.background='#fef7f7'" onmouseleave="this.style.background='white'">
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="font-weight: bold; color: #f5576c; font-size: 16px;">${bushou.number}</div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="font-size: 16px; color: #4a5568; font-weight: 500;">${bushou.name}</div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="font-size: 2rem; font-weight: bold; color: #f5576c; text-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);">${bushou.radical}</div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="font-size: 16px; color: #4a5568; font-weight: 500;">${bushou.pinyin}</div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="font-size: 16px; color: #4a5568; font-weight: 500;">${bushou.strokes}画</div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 200px; margin: 0 auto;">
                            ${bushou.compoundChars.map(char => `
                                <span style="background: #fef7f7; color: #f5576c; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; border: 1px solid #fbb6ce;">
                                    ${char}
                                </span>
                            `).join('')}
                        </div>
                    </td>
                    <td style="padding: 15px 12px; text-align: center;">
                        <button style="padding: 8px 16px; border: 1px solid #f5576c; background: white; color: #f5576c; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.3s;"
                                onclick="editBushou(${bushou.id})"
                                onmouseover="this.style.background='#f5576c'; this.style.color='white'; this.style.transform='scale(1.05)'"
                                onmouseleave="this.style.background='white'; this.style.color='#f5576c'; this.style.transform='scale(1)'">
                            📝 编辑
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        function addBushou() {
            isNewBushou = true;
            currentEditingBushou = null;
            document.getElementById('modalTitle').textContent = '新增部首';
            clearEditForm();
            document.getElementById('bushouEditor').style.display = 'flex';
        }

        function editBushou(id) {
            isNewBushou = false;
            currentEditingBushou = bushouData.find(b => b.id === id);
            if (!currentEditingBushou) return;
            
            document.getElementById('modalTitle').textContent = `编辑部首 - ${currentEditingBushou.name}`;
            fillEditForm(currentEditingBushou);
            document.getElementById('bushouEditor').style.display = 'flex';
        }

        function closeBushouEditor(event) {
            if (event && event.target !== event.currentTarget) return;
            document.getElementById('bushouEditor').style.display = 'none';
        }

        function clearEditForm() {
            document.getElementById('editNumber').value = '';
            document.getElementById('editName').value = '';
            document.getElementById('editRadical').value = '';
            document.getElementById('editPinyin').value = '';
            document.getElementById('editStrokes').value = '';
            document.getElementById('editMeaning').value = '';
            document.getElementById('editOrigin').value = '';
            document.getElementById('editRules').value = '';
            document.getElementById('editTeaching').value = '';
            updatePreview();
            generateCompoundCharsEditor([]);
        }

        function fillEditForm(bushou) {
            document.getElementById('editNumber').value = bushou.number || '';
            document.getElementById('editName').value = bushou.name || '';
            document.getElementById('editRadical').value = bushou.radical || '';
            document.getElementById('editPinyin').value = bushou.pinyin || '';
            document.getElementById('editStrokes').value = bushou.strokes || '';
            document.getElementById('editMeaning').value = bushou.meaning || '';
            document.getElementById('editOrigin').value = bushou.origin || '';
            document.getElementById('editRules').value = bushou.rules || '';
            document.getElementById('editTeaching').value = bushou.teaching || '';
            updatePreview();
            generateCompoundCharsEditor(bushou.compoundChars || []);
        }

        function updatePreview() {
            const radical = document.getElementById('editRadical').value || '？';
            const number = document.getElementById('editNumber').value || '自动生成';
            const pinyin = document.getElementById('editPinyin').value || '待填充';
            const strokes = document.getElementById('editStrokes').value || '-';
            
            document.getElementById('previewChar').textContent = radical;
            document.getElementById('previewNumber').textContent = `编号：${number}`;
            document.getElementById('previewPinyin').textContent = `读音：${pinyin}`;
            document.getElementById('previewStrokes').textContent = `笔画：${strokes}画`;
        }

        function generateCompoundCharsEditor(chars) {
            const container = document.getElementById('compoundCharsEditor');
            container.innerHTML = '';
            
            // 确保至少有5个输入框
            const charArray = [...chars];
            while (charArray.length < 5) {
                charArray.push('');
            }
            
            charArray.forEach((char, index) => {
                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'compound-input';
                input.value = char;
                input.maxLength = 1;
                input.style.cssText = 'width: 40px; height: 40px; text-align: center; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; font-weight: bold;';
                container.appendChild(input);
            });
            
            // 添加按钮（如果少于10个）
            if (charArray.length < 10) {
                const addBtn = document.createElement('button');
                addBtn.textContent = '+';
                addBtn.className = 'add-char-btn';
                addBtn.style.cssText = 'width: 40px; height: 40px; border: 2px dashed #f5576c; background: none; color: #f5576c; border-radius: 6px; cursor: pointer; font-size: 20px;';
                addBtn.onclick = () => {
                    const currentInputs = container.querySelectorAll('.compound-input');
                    if (currentInputs.length < 10) {
                        generateCompoundCharsEditor([...Array.from(currentInputs).map(inp => inp.value), '']);
                    }
                };
                container.appendChild(addBtn);
            }
        }

        function saveBushou() {
            const formData = {
                number: document.getElementById('editNumber').value,
                name: document.getElementById('editName').value,
                radical: document.getElementById('editRadical').value,
                pinyin: document.getElementById('editPinyin').value,
                strokes: parseInt(document.getElementById('editStrokes').value) || 0,
                meaning: document.getElementById('editMeaning').value,
                origin: document.getElementById('editOrigin').value,
                rules: document.getElementById('editRules').value,
                teaching: document.getElementById('editTeaching').value,
                compoundChars: Array.from(document.querySelectorAll('.compound-input')).map(inp => inp.value).filter(v => v.trim())
            };

            if (!formData.name || !formData.radical) {
                alert('请填写必填字段：名称和部首');
                return;
            }

            if (isNewBushou) {
                formData.id = bushouData.length + 1;
                formData.number = formData.number || String(formData.id).padStart(3, '0');
                bushouData.push(formData);
                showMessage('✅ 部首添加成功！', 'success');
            } else if (currentEditingBushou) {
                const index = bushouData.findIndex(b => b.id === currentEditingBushou.id);
                if (index !== -1) {
                    bushouData[index] = { ...currentEditingBushou, ...formData };
                    showMessage('✅ 部首修改成功！', 'success');
                }
            }

            closeBushouEditor();
            loadBushouTable();
        }

        function importBushou() {
            alert('📥 导入部首数据\n\n支持导入Excel/CSV/JSON格式\n• 批量导入部首信息\n• 自动验证数据格式\n• 重复数据检测\n• 导入进度显示');
        }

        function exportBushou() {
            const dataStr = JSON.stringify(bushouData, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `部首数据_${new Date().toISOString().split('T')[0]}.json`;
            link.click();
            URL.revokeObjectURL(url);
            showMessage('✅ 部首数据导出成功！', 'success');
        }

        function triggerImageUpload() {
            document.getElementById('imageInput').click();
        }

        function handleImageUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    showMessage('✅ 图片上传成功！', 'success');
                };
                reader.readAsDataURL(file);
            }
        }

        function searchOriginData() {
            const name = document.getElementById('editName').value;
            if (!name) {
                alert('请先输入部首名称');
                return;
            }
            alert(`🔍 正在搜索"${name}"的象形数据...\n\n功能说明：\n• 连接象形字数据库\n• 自动匹配相关图片\n• 获取起源说明\n• 如无数据则手动上传`);
        }

        // AI配置相关函数
        let aiConfig = {
            platform: 'siliconflow',
            apiKey: '',
            baseUrl: 'https://api.siliconflow.cn/v1',
            defaultModel: 'Qwen2.5-7B-Instruct',
            temperature: 0.7,
            maxTokens: 1000,
            prompts: {
                welcome: '你是一位经验丰富的小学语文老师，正在为学习字根\'{radical}\'的课程创建欢迎词。请创建一个温馨、有趣的欢迎内容，包括：1.亲切的问候 2.本课学习目标 3.学习动机激发 4.课程预览。语言要适合儿童，生动有趣。',
                learning: '作为汉字教学专家，请为字根\'{radical}\'创建详细的学习内容，包括：1.字根介绍 2.字形特征讲解 3.记忆技巧 4.字源故事(要有趣) 5.实例展示。内容要准确、生动、适合初学者。',
                exercise: '请为字根\'{radical}\'生成5道适合儿童的练习题，包括：1.字根识别题 2.组字练习 3.看图识字 4.选择题 5.填空题。题目要有趣味性，难度适中。'
            },
            statistics: {
                totalCalls: 156,
                successRate: 94.2,
                avgResponseTime: 2.3,
                tokenConsumption: 45230
            }
        };

        // 更新AI配置
        function updateAiConfig() {
            aiConfig.platform = document.getElementById('aiPlatform').value;
            aiConfig.apiKey = document.getElementById('apiKey').value;
            aiConfig.baseUrl = document.getElementById('baseUrl').value;
            aiConfig.defaultModel = document.getElementById('defaultModel').value;
            aiConfig.temperature = parseFloat(document.getElementById('temperature').value);
            aiConfig.maxTokens = parseInt(document.getElementById('maxTokens').value);
            
            // 更新URL placeholder
            const urlInput = document.getElementById('baseUrl');
            if (aiConfig.platform === 'openai') {
                urlInput.placeholder = 'https://api.openai.com/v1';
            } else if (aiConfig.platform === 'anthropic') {
                urlInput.placeholder = 'https://api.anthropic.com';
            } else if (aiConfig.platform === 'local') {
                urlInput.placeholder = 'http://localhost:8080/v1';
            } else {
                urlInput.placeholder = 'https://api.siliconflow.cn/v1';
            }
        }

        // 切换提示词模板标签
        function switchPromptTab(tabName) {
            // 更新标签样式
            document.querySelectorAll('.template-tab').forEach(tab => {
                tab.style.background = 'white';
                tab.style.color = '#f5576c';
                tab.style.border = '1px solid #f5576c';
            });
            event.target.style.background = '#f5576c';
            event.target.style.color = 'white';
            event.target.style.border = 'none';
            
            // 切换内容
            document.querySelectorAll('.template-item').forEach(item => {
                item.style.display = 'none';
            });
            document.getElementById(tabName + '-template').style.display = 'block';
        }

        // 保存提示词模板
        function savePromptTemplates() {
            aiConfig.prompts.welcome = document.getElementById('welcomePrompt').value;
            aiConfig.prompts.learning = document.getElementById('learningPrompt').value;
            aiConfig.prompts.exercise = document.getElementById('exercisePrompt').value;
            
            // 保存到localStorage
            localStorage.setItem('aiPromptTemplates', JSON.stringify(aiConfig.prompts));
            showMessage('✅ 提示词模板保存成功！', 'success');
        }

        // 测试提示词模板
        function testPromptTemplate() {
            const activeTab = document.querySelector('.template-tab.active');
            if (!activeTab) return;
            
            const templateType = activeTab.textContent.includes('欢迎') ? 'welcome' :
                                activeTab.textContent.includes('学习') ? 'learning' : 'exercise';
            
            // 模拟测试
            showMessage(`🧪 正在测试${templateType}模板...`, 'info');
            setTimeout(() => {
                showMessage('✅ 模板测试通过！AI响应正常', 'success');
            }, 2000);
        }

        // 重置提示词模板
        function resetPromptTemplates() {
            if (confirm('确定要重置所有提示词模板为默认值吗？')) {
                document.getElementById('welcomePrompt').value = aiConfig.prompts.welcome;
                document.getElementById('learningPrompt').value = aiConfig.prompts.learning;
                document.getElementById('exercisePrompt').value = aiConfig.prompts.exercise;
                showMessage('🔄 提示词模板已重置为默认值', 'info');
            }
        }

        // 测试AI连接
        function testAiConnection() {
            if (!aiConfig.apiKey) {
                showMessage('❌ 请先配置API密钥', 'error');
                return;
            }
            
            showMessage('🔍 正在测试AI连接...', 'info');
            
            // 模拟API调用测试
            setTimeout(() => {
                const success = Math.random() > 0.1; // 90% 成功率
                if (success) {
                    showMessage('✅ AI连接测试成功！', 'success');
                    // 更新统计数据
                    aiConfig.statistics.totalCalls++;
                    document.getElementById('totalCalls').textContent = aiConfig.statistics.totalCalls;
                } else {
                    showMessage('❌ AI连接测试失败，请检查配置', 'error');
                }
            }, 2000);
        }

        // 保存AI配置
        function saveAiConfig() {
            updateAiConfig();
            localStorage.setItem('aiConfig', JSON.stringify(aiConfig));
            showMessage('✅ AI配置保存成功！', 'success');
        }

        // 导出AI配置
        function exportAiConfig() {
            updateAiConfig();
            const configData = {
                ...aiConfig,
                apiKey: '***' // 隐藏API密钥
            };
            
            const dataStr = JSON.stringify(configData, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `AI配置_${new Date().toISOString().split('T')[0]}.json`;
            link.click();
            URL.revokeObjectURL(url);
            showMessage('✅ AI配置导出成功！', 'success');
        }

        // 导入AI配置
        function importAiConfig() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.json';
            input.onchange = function(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        try {
                            const importedConfig = JSON.parse(e.target.result);
                            // 合并配置（保留当前API密钥）
                            const currentApiKey = aiConfig.apiKey;
                            aiConfig = { ...aiConfig, ...importedConfig };
                            if (currentApiKey && !importedConfig.apiKey) {
                                aiConfig.apiKey = currentApiKey;
                            }
                            
                            // 更新UI
                            loadAiConfigToUI();
                            showMessage('✅ AI配置导入成功！', 'success');
                        } catch (error) {
                            showMessage('❌ 配置文件格式错误', 'error');
                        }
                    };
                    reader.readAsText(file);
                }
            };
            input.click();
        }

        // 初始化AI配置
        function initAiConfig() {
            // 从localStorage加载配置
            const savedConfig = localStorage.getItem('aiConfig');
            if (savedConfig) {
                try {
                    aiConfig = { ...aiConfig, ...JSON.parse(savedConfig) };
                } catch (error) {
                    console.error('加载AI配置失败:', error);
                }
            }
            
            const savedPrompts = localStorage.getItem('aiPromptTemplates');
            if (savedPrompts) {
                try {
                    aiConfig.prompts = { ...aiConfig.prompts, ...JSON.parse(savedPrompts) };
                } catch (error) {
                    console.error('加载提示词模板失败:', error);
                }
            }
            
            // 检查AI标签页是否可见，如果可见则立即初始化UI
            const aiContent = document.getElementById('ai-content');
            if (aiContent && aiContent.style.display !== 'none') {
                setTimeout(() => {
                    loadAiConfigToUI();
                }, 100);
            }
            
            console.log('✅ AI配置初始化完成');
        }

        // 加载AI配置到UI
        function loadAiConfigToUI() {
            try {
                // 安全地设置每个元素的值
                const aiPlatform = document.getElementById('aiPlatform');
                if (aiPlatform) aiPlatform.value = aiConfig.platform;
                
                const apiKey = document.getElementById('apiKey');
                if (apiKey) apiKey.value = aiConfig.apiKey;
                
                const baseUrl = document.getElementById('baseUrl');
                if (baseUrl) baseUrl.value = aiConfig.baseUrl;
                
                const defaultModel = document.getElementById('defaultModel');
                if (defaultModel) defaultModel.value = aiConfig.defaultModel;
                
                const temperature = document.getElementById('temperature');
                if (temperature) temperature.value = aiConfig.temperature;
                
                const maxTokens = document.getElementById('maxTokens');
                if (maxTokens) maxTokens.value = aiConfig.maxTokens;
                
                const welcomePrompt = document.getElementById('welcomePrompt');
                if (welcomePrompt) welcomePrompt.value = aiConfig.prompts.welcome;
                
                const learningPrompt = document.getElementById('learningPrompt');
                if (learningPrompt) learningPrompt.value = aiConfig.prompts.learning;
                
                const exercisePrompt = document.getElementById('exercisePrompt');
                if (exercisePrompt) exercisePrompt.value = aiConfig.prompts.exercise;
                
                // 更新统计显示
                const totalCalls = document.getElementById('totalCalls');
                if (totalCalls) totalCalls.textContent = aiConfig.statistics.totalCalls;
                
                const successRate = document.getElementById('successRate');
                if (successRate) successRate.textContent = aiConfig.statistics.successRate + '%';
                
                const avgResponseTime = document.getElementById('avgResponseTime');
                if (avgResponseTime) avgResponseTime.textContent = aiConfig.statistics.avgResponseTime + 's';
                
                const tokenConsumption = document.getElementById('tokenConsumption');
                if (tokenConsumption) tokenConsumption.textContent = (aiConfig.statistics.tokenConsumption / 1000).toFixed(1) + 'K';
                
                console.log('✅ AI配置UI更新完成');
            } catch (error) {
                console.error('加载AI配置到UI失败:', error);
            }
        }

        // 复合字管理系统
        let compoundData = [
            {
                id: 1,
                character: '地',
                pinyin: 'dì',
                strokes: 6,
                components: ['土', '也'],
                componentTypes: ['部首', '字根'],
                meaning: '土地、地方',
                status: 'verified',
                difficulty: 2,
                frequency: 95,
                aiGenerated: false
            },
            {
                id: 2,
                character: '河',
                pinyin: 'hé',
                strokes: 8,
                components: ['氵', '可'],
                componentTypes: ['部首', '字根'],
                meaning: '河流、水道',
                status: 'verified',
                difficulty: 2,
                frequency: 88,
                aiGenerated: false
            },
            {
                id: 3,
                character: '村',
                pinyin: 'cūn',
                strokes: 7,
                components: ['木', '寸'],
                componentTypes: ['部首', '字根'],
                meaning: '村庄、乡村',
                status: 'pending',
                difficulty: 3,
                frequency: 65,
                aiGenerated: true
            }
        ];

        // 初始化复合字管理
        function initCompoundManagement() {
            loadCompoundTable();
            updateCompoundStats();
            console.log('✅ 复合字管理初始化完成');
        }

        // 复合字管理功能
        function loadCompoundTable() {
            const tbody = document.getElementById('compoundTableBody');
            if (!tbody) return;
            
            tbody.innerHTML = compoundData.map(compound => {
                const statusStyle = compound.status === 'verified' ? 'background: #d4edda; color: #155724;' :
                                  compound.status === 'pending' ? 'background: #fff3cd; color: #856404;' :
                                  'background: #f8d7da; color: #721c24;';
                
                const statusText = compound.status === 'verified' ? '✅ 已验证' :
                                 compound.status === 'pending' ? '⏳ 待审核' : '❌ 已拒绝';

                return `
                    <tr style="border-bottom: 1px solid #f0f0f0;">
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="font-size: 2rem; font-weight: bold; color: #667eea;">${compound.character}</div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="font-size: 16px; color: #4a5568;">${compound.pinyin}</div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="font-size: 16px; color: #4a5568;">${compound.strokes}画</div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;">
                                ${compound.components.map((comp, index) => `
                                    <span style="background: #e6f7ff; color: #1890ff; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 600;">
                                        ${comp}<small style="opacity: 0.7;">[${compound.componentTypes[index]}]</small>
                                    </span>
                                `).join('')}
                            </div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="font-size: 14px; color: #4a5568;">${compound.meaning}</div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <span style="padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; ${statusStyle}">
                                ${statusText}
                            </span>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
                                ${'★'.repeat(compound.difficulty)}${'☆'.repeat(5 - compound.difficulty)}
                                <small style="color: #666;">(${compound.difficulty}/5)</small>
                            </div>
                        </td>
                        <td style="padding: 15px 12px; text-align: center;">
                            <div style="display: flex; gap: 5px; justify-content: center;">
                                <button style="padding: 4px 8px; border: 1px solid #667eea; background: white; color: #667eea; border-radius: 12px; cursor: pointer; font-size: 10px;" onclick="editCompound(${compound.id})">📝</button>
                                <button style="padding: 4px 8px; border: 1px solid #48bb78; background: white; color: #48bb78; border-radius: 12px; cursor: pointer; font-size: 10px;" onclick="validateCompound(${compound.id})">✅</button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');
        }

        function updateCompoundStats() {
            const total = compoundData.length;
            const verified = compoundData.filter(c => c.status === 'verified').length;
            const aiRecommended = compoundData.filter(c => c.aiGenerated).length;
            
            const totalElement = document.getElementById('totalCompounds');
            const verifiedElement = document.getElementById('verifiedCompounds');
            const aiElement = document.getElementById('aiRecommended');
            
            if (totalElement) totalElement.textContent = total;
            if (verifiedElement) verifiedElement.textContent = verified;
            if (aiElement) aiElement.textContent = aiRecommended;
        }

        function filterCompounds() { loadCompoundTable(); }
        function clearFilters() { loadCompoundTable(); }
        function addCompound() { showMessage('📝 新增复合字功能开发中...', 'info'); }
        function editCompound(id) { showMessage('📝 编辑功能开发中...', 'info'); }
        function validateCompound(id) { 
            const compound = compoundData.find(c => c.id === id);
            if (compound) {
                compound.status = 'verified';
                loadCompoundTable();
                updateCompoundStats();
                showMessage(`✅ 复合字"${compound.character}"验证完成！`, 'success');
            }
        }
        function aiGenerateCompounds() { showMessage('🤖 AI生成功能开发中...', 'info'); }
        function validateCombinations() { showMessage('🔍 验证功能开发中...', 'info'); }
        function optimizeDatabase() { showMessage('⚡ 优化功能开发中...', 'info'); }
        function refreshAiRecommendations() { showMessage('🔄 刷新功能开发中...', 'info'); }
        function batchVerify() { showMessage('✅ 批量验证功能开发中...', 'info'); }
        function importCompounds() { showMessage('📥 导入功能开发中...', 'info'); }
        function exportCompounds() { showMessage('📤 导出功能开发中...', 'info'); }
    </script>
</body>
</html> 